<template>
  <div class="app-nav">
    <div class="app-nav-title">
      <span>设置</span>
    </div>
    <div class="app-nav-list">
      <el-menu>
        <router-link v-for="(ele,index) in menus" :key="index" :to="ele.router">
          <el-menu-item>
            <font-awesome-icon :icon="ele.icon"/>
            <span class="menu-title">{{ele.title}}</span>
          </el-menu-item>
        </router-link>
      </el-menu>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: [],
      defaultProps: {
        children: "menus",
        label: "name"
      },
      menus: []
    };
  },
  created() {
    this.getAll();
    var that = this;
    import("./settings.menu.json").then(function(data) {
      that.menus = data.default;
    });
  },
  methods: {
    init() {
      this.data = [];
    },
    handleNodeClick(data) {
      console.log(data);
      if (data.type != "group") {
        this.$emit("getMenu", data.id);
      }
    },
    getAll() {
      this.data = [];
      this.$http({
        url: this.$URL_ADDR.menu.all,
        method: "GET"
      }).then(resp => {
        this.data = resp.data.data;
      });
    }
  }
};
</script>
<style scoped>
.app-nav-list .menu-title {
  margin-left: 10px;
}
</style>
